<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>医院疫情打卡状况</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <nav>
            <div>医院公作人员打卡统计</div>
        </nav>
        <main>
            <div class="total">
                <div class="title">总人数：<span>{{data.length}}</span><span>人</span></div>
            </div>
            <div class="detail_list">
                <div class="detail_item" v-for="v in data" :key="v.id">
                    <div class="detail_item_left">
                        <div class="detail_item_img">{{v.img}}</div>
                        <div class="detail_item_name">{{v.docname}}</div>
                    </div>
                    <div class="detail_item_right">
                        <div class="detail_item_detail" v-if='v.ispost==1'>已打卡</div>
                        <div class="detail_item_detail" v-else style="color: crimson;">未打卡</div>
                    </div>
                </div>
            </div>
            <button><a :href="'http://localhost:9090/login'">打卡</a> </button>
            <button class="message" @click="addMsg">留言</button>
        </main>
        <div class="bgc" v-show="isDisplay">
            <div class="opinion">
                <form action="" method="POST">
                    <div class="form_name form_input">
                        <div>姓名</div>
                        <input type="text" name="name" id="name" placeholder="请输入你的姓名">
                    </div>
                    <div class="form_email form_input">
                        <div>邮箱</div>
                        <input type="email" name="email" id="email" placeholder="请输入您的邮箱">
                    </div>
                    <div class="form_gender form_input">
                        <div>性别</div>
                        <div>
                            <input type="radio" name="sex"  value="男">男
                            <input type="radio" name="sex"  value="女">女
                        </div>
                    </div>
                    <div class="form_tel form_input">
                        <div>手机号</div>
                        <input type="tel" name="phone" id="tel" placeholder="请输入您的手机号">
                    </div>
                    <div class="form_name form_input">
                        <div>留言信息</div>
                        <textarea name="detail" maxlength="400"></textarea>
                    </div>
                </form>
                <div class="submit">
                    <button  @click="submit">提交</button>
                    <button class="back" @click="addMsg">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>


    let vm = Vue.createApp({
        data(){
            return{
                isDisplay:false,
                date:1,
                data:[]
            }
        },
        mounted(){
            (async () => {
                    let response = await fetch('api/indexcard/day');

                    let commits = await response.json();
                    this.data = commits;
            })()
        },
        methods:{
            submit(){
                let form = document.querySelector("form");
                let data = new FormData(form);
                (async () => {
                    let response = await fetch('api/message/save',{
                        method:'POST',
                        body: data
                    });
                    let commits = await response.json();
                    console.log(commits);
                })()
                window.location.reload();
            },
            selectDate(n){
                this.date = n;
                if(n==1){
                    (async () => {
                    let response = await fetch('http://127.0.0.1:8000/data_now');

                    let commits = await response.json();
                    this.data = commits;
                    })()

                }
                else if(n==2){
                    (async () => {
                    let response = await fetch('http://127.0.0.1:8000/data_week');

                    let commits = await response.json();
                    this.data = commits;
                    })()
                }
                else{
                    (async () => {
                    let response = await fetch('http://127.0.0.1:8000/data_month');

                    let commits = await response.json();
                    this.data = commits;
                    })()
                }
            },
            addMsg(){
                this.isDisplay = !this.isDisplay;
            }
        }
    }).mount("#app");
</script>
</html>